<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/_linkPages/basePath.jsp" %>
<!DOCTYPE html>
<%--修改资料--%>
<!-- saved from url=(0054)http://www.maomijiaoyi.com/index.php?/xiugaixinxi.html -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>猫咪交易网,我的信息-修改资料</title>
    <meta name="keywords" content="宠物猫,买猫,卖猫,宠物猫交易,宠物猫价格">
    <meta name="description"
          content="猫咪交易网(www.maomijiaoyi.com)行业购宠第一品牌，千万家卖猫商家入驻覆盖全国各地，买放心宠物猫、了解最全面的宠物猫价格就上猫咪交易网、12年品牌值得信赖！">
    <script src="https://cdn.bootcss.com/jquery//2.0.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
    <link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="${basePath}jsp/hs/css/usercenter.css">
    <link rel="stylesheet" href="${basePath}jsp/hs/css/comment.css">

    <script src="${basePath}jsp/hs/js/comment.js" type="text/javascript" charset="utf-8"></script>
    <script src="${basePath}jsp/lqj/js/layer.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="${basePath}jsp/lqj/css/layer.css" id="layuicss-layer">
    <script src="${basePath}jsp/hs/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">


        #growls.default {
            top: 80px!important;
            right: 40%!important;//如果准备左边显示，就把这个数值调成80%;
        }


        .upLoad_wechar_pic_img {
            width: 150px;
            height: 150px;
        }

        #upLoad_wechar_pic {
            border: 1px solid #e5e5e5;
            padding: 2px;
            background-color: #e5e5e5;
            color: #333;
            border-radius: 3px;
        }

        #upLoad_wechar_pic:hover {
            background-color: #eee;
            color: #333;
            cursor: pointer;
        }
    </style>

</head>
<body>

<!-- 引入公共头部 -->
<!-- 网页头部 -->
<%@ include file="cat/head.jsp"%>

<div style="height: 80px;"></div>

<!-- 面包屑导航栏 Crumbs_nav-->
<div id="Crumbs_nav">
    <a target="_blank" href="http://localhost:8080/jsp/hs/index.jsp">首页 &gt;</a>

    <a href="http://localhost:8080/jsp/hs/modify.jsp"><span>修改资料</span></a>
</div>


<!-- 个人中心 user_box-->
<div id="user_box" style="border: #eee solid 3px; box-sizing: border-box;">

    <!-- 左侧侧边栏 -->
    <div id="left_side">

        <a href="http://localhost:8080/jsp/hs/personal.jsp">
            <img src="${basePath}jsp/hs/img/userinfo.png" alt="">
            <p>个人信息</p>
        </a>

        <a style="background: rgba(56,50,50,0.2);" href="http://localhost:8080/jsp/hs/modify.jsp" 　="">
            <img src="${basePath}jsp/hs/img/xiugai_zl.png" alt="">
            <p>修改资料</p>
        </a>

        <a href="http://localhost:8080/jsp/hs/password.jsp">
            <img src="${basePath}jsp/hs/img/xiugai_pwd.png" alt="">
            <p>修改密码</p>
        </a>

        <a href="http://localhost:8080/jsp/hs/myPost.jsp">
            <img src="${basePath}jsp/hs/img/my_post.png" alt="">
            <p>我的帖子</p>
        </a>


    </div>


    <!-- 右侧信息展示 -->
    <div id="right_infobox">

        <p class="base_info">修改资料</p>

        <!-- 修改密码表单 -->
        <div id="form_box">

            <form action="${basePath}head"  method="post" id="regForm"  onsubmit="return cheackinput(this)" enctype="multipart/form-data">

                <div class="input_box">　　用户名：${user.username}</div>

                <div class="input_box">
                    <input type="hidden" name="method" value="updataMessage" >
                    <input type="hidden" name="id" value="${user.id}">
                    　　　昵称：
                    <input type="text" onblur="cheackname()" onfocus="shownum()" value="${user.name}" name="name" id="name">
                    <span id="ck_name"></span>
                </div>

                <div class="input_box">
                    　　　电话：
                    <input type="text" onblur="cheackPhonenumber()" name="telephone" id="telephone"
                           value="${user.telephone}">
                    <span id="phone_num"></span>
                </div>

                <div class="input_box">
                    　　QQ 号：
                    <input type="text" name="qq" id="qq" value="${user.qq}">
                    <span id="QQ_"></span>
                </div>

                <div class="input_box">
                    　　微信号：
                    <input type="text" name="wx" id="wx" value="${user.wx}">
                    <span id="wechat"></span>
                </div>

                <div class="input_box">
                    　电子邮件：
                    <input type="text" onblur="checkEmail()" name="Email" id="Email" value="${user.email}">
                    <span id="email_"></span>
                </div>

                <div class="input_box">
                    用户头像 :
                    <img class="upLoad_wechar_pic_img" src="http://www.maomijiaoyi.com/index.php?/xiugaixinxi.html"
                         style="display: none;"> <span id="upLoad_wechar_pic">上传图片</span>
                    <input type="hidden" name="pic2" value="">
                    <input type="file" name="pic" id="pic" style="display: none;">
                    <span id="pic_"></span>
                </div>
<div align="center">


                <input type="submit" id="save_submit" value="保 存">
</div>

            </form>

        </div>

    </div>

</div>

<div style="height: 80px;"></div>

<!-- 引入公共尾部 -->
<!-- 网页底部 -->
<div id="footer">

    <div class="logo">
        <div class="logo_kuang">
            <div>
                <a href="http://localhost:8080/jsp/hs/index.jsp">
                    <img alt="猫咪交易网" title="猫咪交易网" src="${basePath}jsp/hs/img/logo.png">
                </a>
            </div>
        </div>
    </div>


    <div class="banquan">
        <div class="center_1220">
            版权所有：猫咪交易网 www.maomijiaoyi.com 友情链接互换:qq 3416807849
        </div>
    </div>

    <div class="banquan">
        <div class="center_1220">
            【免责声明：本站所有猫猫交易信息内容系用户自行发布，其真实性、合法性由发布人负责，本站不提供任何保证，亦不承担任何法律责任！】
        </div>
    </div>

    <div class="banquan">
        <div class="center_1220">
            <a style="color: #FFF;" href="http://www.beian.gov.cn/portal/registerSystemInfo" target="_blank">
                <img src="${basePath}jsp/hs/img/foot_link3.png">
                沪ICP备18022709号-1 </a>
        </div>
    </div>

</div>

<!-- 修改信息表单验证 -->
<script type="text/javascript">

    $('#upLoad_wechar_pic').click(function () {
        $('#pic').click();

        $("#pic").change(function (e) {
            // 获取上传文件信息
            var fp = $("#pic");
            var f = fp[0].files[0];

            if (Math.floor(f.size / 1024) > 64) {
                $('#pic_').html('图片文件大小超过64Kb,请重新选择合适的图片！');
                $("#upLoad_wechar_pic").siblings('img').attr('src', '');
                return false;
            }

            if (!/image\/jpeg/.test(f.type) && !/image\/png/.test(f.type) && !/image\/gif/.test(f.type)) {
                $('#pic_').html('图片文件类型不符合!');
                $("#upLoad_wechar_pic").siblings('img').attr('src', '');
                return false;
            }

            $('#pic_').html('图片符合');

            // FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。
            var reader = new FileReader();
            reader.onload = function (ee) {
                $("#upLoad_wechar_pic").siblings('img').attr('src', this.result);
            }

            reader.readAsDataURL(this.files[0]);
            sta = "pic2";
            $("#upLoad_wechar_pic").siblings('img').fadeIn(300);
        });

    });

    $("#upLoad_wechar_pic").siblings('img').click(function () {
        $('#pic').click();

        $("#pic").change(function (e) {
            // 获取上传文件信息
            var fp = $("#pic");
            var f = fp[0].files[0];

            if (Math.floor(f.size / 1024) > 64) {
                $('#pic_').html('图片文件大小超过64Kb,请重新选择合适的图片！');
                $("#upLoad_wechar_pic").siblings('img').attr('src', '');
                return false;
            }

            if (!/image\/jpeg/.test(f.type) && !/image\/png/.test(f.type) && !/image\/gif/.test(f.type)) {
                $('#pic_').html('图片文件类型不符合!');
                $("#upLoad_wechar_pic").siblings('img').attr('src', '');
                return false;
            }

            $('#pic_').html('图片符合');

            // FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。
            var reader = new FileReader();
            reader.onload = function (ee) {
                $("#upLoad_wechar_pic").siblings('img').attr('src', this.result);
            }

            reader.readAsDataURL(this.files[0]);
            $("#upLoad_wechar_pic").siblings('img').fadeIn(300);
        });

    });




    // 验证用户名
    function cheackname() {
        var cheackusername = new RegExp(/^[^\s'"\.,，。!@#$%*&]+$/);
        var username = document.getElementById("name").value;
        if (username.length <= 0) {

            document.getElementById('ck_name').innerHTML = '昵称不能为空';
            return false;
        }

        if (username.length < 3) {

            document.getElementById('ck_name').innerHTML = '昵称长度不小于3位';
            document.getElementById("username").value = '';
            return false;
        }

        if (username.length > 12) {

            document.getElementById('ck_name').innerHTML = '昵称长度超出';
            document.getElementById("username").value = '';
            return false;
        }

        if (cheackusername.test(username)) {
            return true;
        } else {

            document.getElementById('ck_name').innerHTML = '昵称有特殊字符';
            document.getElementById("name").value = '';
            return false;
        }
    };

    // 验证电话号码
    function cheackPhonenumber() {
        var cheackPhonenumber = document.getElementById("Phonenumber").value;
        var cheack2 = new RegExp(/^((\d{3,4})|\d{3,4}-)?\d{7,8}$/);
        if (cheack2.test(cheackPhonenumber)) {
            document.getElementById('phone_num').innerHTML = '';
            return true;

        } else {

            document.getElementById('phone_num').innerHTML = '电话号码不正确';
            document.getElementById("Phonenumber").value = '';
            return false;
        }
    };

    //  验证邮箱
    function checkEmail() {
        var Email = document.getElementById("Email").value;
        var checkEmail = new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);

        if (Email.length <= 0) {

            document.getElementById('email_').innerHTML = '邮箱为空';
            return false;
        }

        if (checkEmail.test(Email)) {
            document.getElementById('email_').innerHTML = '';
            return true;
        } else {

            document.getElementById('email_').innerHTML = '邮箱不正确';
            document.getElementById("Email").value = '';
            return false;
        }
    };

    function cheackinput() {

        if (document.getElementById("username").value.length <= 0) {

            document.getElementById('ck_name').innerHTML = '昵称不能为空';
            return false;

        }

        if (document.getElementById("telephone").value.length <= 0) {

            document.getElementById('phone_num').innerHTML = '电话不能为空';
            return false;

        }

        if (document.getElementById("cat_Contact_QQ").value.length <= 0) {

            document.getElementById('QQ_').innerHTML = 'QQ不能为空';
            return false;

        }

        if (document.getElementById("cat_Contact_WeChat").value.length <= 0) {

            document.getElementById('wechat').innerHTML = '微信不能为空';
            return false;

        }

        if (document.getElementById("Email").value.length <= 0) {

            document.getElementById('email_').innerHTML = '邮件不能为空';
            return false;

        }else {
            return true;
        }



    }
    function Toast(msg,duration){
        duration=isNaN(duration)?3000:duration;
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText="width:50%; min-width:150px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:40%; left:20%; z-index:999999; font-weight:bold;";
        document.body.appendChild(m);
        setTimeout(function() {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function() { document.body.removeChild(m) }, d * 1000);
        }, duration);
    }
    $(function() {

            console.log("${booleans}");
            console.log("${updataMesage}");
            if ("${booleans}" == "true"){
                console.log(1)
                Toast('${updataMesage}',2000);
            }
        }

        <c:remove var="updataMesage" scope="session"/>
        <c:remove var="booleans" scope="session"/>

    )


</script>


</body>
</html>